/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import { Form, Radio, Input, InputNumber, DatePicker, Tabs, message, Button, Select } from 'antd';
import { connect } from 'dva';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { Vector } from 'ol/layer';

import liuliangji from './../../images/liuliangji.png';
import gold_groud2 from './../../images/valve2.png';
import shuizhi from './../../images/shuizhi.png';
import dcjlq from './../../images/dcjlq.jpg';
import DN800SNLD from './../../images/DN800SNLD.jpg';
import DN800unknow from './../../images/DN800unknow.jpg';
import LDE from './../../images/LDE.jpg';
import styles from './index.less';
import find from 'lodash/find';
import { Vector as VectorSource } from 'ol/source';
import Feature from 'ol/Feature';
import { Icon, Stroke, Style } from 'ol/style';
import Point from 'ol/geom/Point';
import { fromLonLat, toLonLat } from 'ol/proj';

import yali from './../../images/location.png';
import Zmage from 'react-zmage';
import P0 from '../../images/valve.png';
import setting from './setting.json';
import axios from 'axios';
import GeoJSON from 'ol/format/GeoJSON';

const Option = Select.Option;
const FormItem = Form.Item;
const { TabPane } = Tabs;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      img: '',
      all_vendors: [],
      all_protocols: [],
      layers: [
        new TileLayer({
          title: '天地图卫星影像',
          visible: true,
          source: new XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63',
          }),
        }),
        new TileLayer({
          title: '天地图路网',
          visible: false,
          source: new XYZ({
            url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63',
          }),
        }),
        new TileLayer({
          title: '天地图文字标注',
          source: new XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63',
          }),
        }),

      ],
      point: [],
      templateId: '',
      hardware_configs: {},
    };
  }

  getMarker = () => {
    return this.state.point;
  };
  getConfig = () => {
    return {
      template: Number(this.state.templateId),
      hardware_configs: this.state.hardware_configs,
    };
  };

  componentDidMount() {
    const response = setting;
    console.log('hd_response', response);
    if (!this.props.editRecord) {
      console.log('response', response);
      response.data.hardware_configs.modbus_03 = response.data.hardware_configs.modbus;
      response.data.hardware_configs.flowmeter = [{}, {}];
      this.setState({
        hardware_configs: response.data.hardware_configs,
      });
    } else {
      let editRecord = JSON.parse(JSON.stringify(this.props.editRecord));
      console.log('this.props.editRecord', editRecord);
      editRecord.hardware_configs.modbus_03 = editRecord.hardware_configs.modbus;
      editRecord.hardware_configs.device[0].upload_interval = editRecord.hardware_configs.device[0].upload_interval / 60;
      this.setState({
        hardware_configs: editRecord.hardware_configs,
        templateId: editRecord.template.toString(),
      });
    }

    if (this.props.findChildFunc) {
      this.props.findChildFunc(this.getMarker);
    }

    if (this.props.getConfigFunc) {
      this.props.getConfigFunc(this.getConfig);
    }

    const that = this;

    let map = this.map = new Map({
      target: 'press_sensor_map',
      layers: this.state.layers,
      view: new View({
        center: this.props.editRecord ? fromLonLat([this.props.editRecord.longitude, this.props.editRecord.latitude]) : fromLonLat([89.176282, 42.948544]),//经纬度
        zoom: 14,
        maxZoom: 18,
        minZoom: 13,
      }),
    });
    let pointerLayer = null;
    if (this.props.editRecord) {
      this.setState({
        point: [this.props.editRecord.longitude, this.props.editRecord.latitude],
      }, function() {
        let mockvectorSource = that.createApoint(fromLonLat(this.state.point));
        // 创建标注图层
        pointerLayer = new Vector({
          source: mockvectorSource,
          zIndex: 12,

        });
        // 将标注图层添加到地图上
        map.addLayer(pointerLayer);
      });
    }
    map.on('click', function(e) {
      //在点击时获取像素区域;

      that.setState({
        point: toLonLat(e.coordinate),
      });
      if (pointerLayer) {
        map.removeLayer(pointerLayer);
      }
      let mockvectorSource = that.createApoint(e.coordinate);
      // 创建标注图层
      pointerLayer = new Vector({
        source: mockvectorSource,
        zIndex: 12,
      });
      // 将标注图层添加到地图上
      map.addLayer(pointerLayer);
    });

    axios(`http://test.zhsgy.top:7405/geoserver/tulufan/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tulufan%3Anewpipeline&outputFormat=application%2Fjson`, {
      method: 'GET',
    })
      .then(response => {
        console.log('response', response);
        let designPipeVectorSource = this.designPipeVectorSource = new VectorSource({
          features: (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(response.data),
        });
        console.log('designPipeVectorSource', designPipeVectorSource);
        let designPipeVectorLayer = this.designPipeVectorLayer = new Vector({
          source: designPipeVectorSource,
          zIndex: 10,
          style: new Style({
            stroke: new Stroke({
              color: 'rgb(39,226,83)',
              width: 2,

            }),
          }),
        });
        this.map.addLayer(designPipeVectorLayer);
      });

  }

  createApoint = (coordinate) => {
    let point = new Feature({
      geometry: new Point(coordinate),
      name: '压力传感器',
    });
    //设置图标的样式
    point.setStyle(new Style({
      /**{olx.style.IconOptions}类型*/
      image: new Icon({
        anchorOrigin: 'top-right',
        offsetOrigin: 'top-right',
        src: yali,
      }),
    }));

    // 创建标注的数据源
    let mockvectorSource = new VectorSource({
      features: [point],
    });
    return mockvectorSource;
  };
  changeConfig = (newConfig) => {
    this.setState({
      hardware_configs: { ...this.state.hardware_configs, ...newConfig },
    });
  };

  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
    };
    console.log(this.state.point);
    const that = this;
    let img = '';
    if (this.state.templateId === '1') {
      img = gold_groud2;
    } else if (this.state.templateId === '2') {
      img = liuliangji;
    } else if (this.state.templateId === '3') {
      img = shuizhi;
    } else if (this.state.templateId === '4') {
      img = dcjlq;
    }else if (this.state.templateId === '5') {
      img = DN800SNLD;
    }else if (this.state.templateId === '6') {
      img = DN800unknow;
    }else if (this.state.templateId === '7') {
      img = LDE;
    }

    const { getFieldDecorator } = this.props.form;
    const username = sessionStorage.getItem('username');
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               站点名称
            </span>
            )}
          >
            {getFieldDecorator('name', {
              initialValue: this.props.editRecord ? this.props.editRecord.name : '',
              rules: [{ required: true, message: '请输入名称' }],
            })(
              <Input/>,
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               站点地址
            </span>
            )}
          >
            {getFieldDecorator('address', {
              initialValue: this.props.editRecord ? this.props.editRecord.address : '',
            })(
              <Input/>,
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               地图
            </span>
            )}
          >
            <div id="press_sensor_map" style={{ width: '100%', height: '350px' }}></div>
          </FormItem>
        </Form>
        <FormItem
          {...formItemLayoutWithLabel}
          label={(
            <span>
             站点类型
          </span>
          )}>
          <Select style={{ width: '100%' }} disabled={Boolean(this.props.editRecord)} value={this.state.templateId}
                  onChange={(e) => {
                    this.setState({
                      templateId: e,
                    }, function() {
                      if (e === '1') {
                        this.state.hardware_configs.device[0].enable = 1;
                        this.state.hardware_configs.device[0].upload_interval = 60;
                        this.state.hardware_configs.flowmeter[0].enable = 0;
                        this.state.hardware_configs.flowmeter[1].enable = 0;

                        this.state.hardware_configs.sensor[0].type = 'sensor001';
                        this.state.hardware_configs.sensor[0].alias = '阀前压力';
                        this.state.hardware_configs.sensor[0].normal_upload_interval = 900;
                        this.state.hardware_configs.sensor[0].alarm_upload_interval = 30;
                        this.state.hardware_configs.sensor[0].fluctuation_value = 0.05;
                        this.state.hardware_configs.sensor[0].alarm = 1;
                        this.state.hardware_configs.sensor[0].over = 0.8;
                        this.state.hardware_configs.sensor[0].over_cancel = 0.8;
                        this.state.hardware_configs.sensor[0].under = 0.3;
                        this.state.hardware_configs.sensor[0].under_cancel = 0.3;
                        this.state.hardware_configs.sensor[1].type = 'sensor001';
                        this.state.hardware_configs.sensor[1].alias = '阀后压力';
                        this.state.hardware_configs.sensor[1].normal_upload_interval = 900;
                        this.state.hardware_configs.sensor[1].alarm_upload_interval = 30;
                        this.state.hardware_configs.sensor[1].fluctuation_value = 0.05;
                        this.state.hardware_configs.sensor[1].alarm = 1;
                        this.state.hardware_configs.sensor[1].over = 0.7;
                        this.state.hardware_configs.sensor[1].over_cancel = 0.7;
                        this.state.hardware_configs.sensor[1].under = 0.3;
                        this.state.hardware_configs.sensor[1].under_cancel = 0.3;

                        this.state.hardware_configs.modbus_03[0].type = 'DOUBLE-VALVE-PLC';
                        this.state.hardware_configs.modbus_03[0].alias = '双阀';
                        this.state.hardware_configs.modbus_03[0].butterfly_valve1_status = 2;
                        this.state.hardware_configs.modbus_03[0].butterfly_valve2_status = 2;
                        this.state.hardware_configs.modbus_03[0].butterfly_valve3_status = 2;
                        this.state.hardware_configs.modbus_03[0].butterfly_valve4_status = 2;
                        this.state.hardware_configs.modbus_03[0].pressure_valve_pressure_limit_value = 0.6;
                        this.state.hardware_configs.control_valve[0].enable = '1';
                        this.state.hardware_configs.control_valve[0].alias = '调节阀';
                        this.state.hardware_configs.control_valve[0].device_number = '';

                        this.state.hardware_configs.digital_input[0].enable = '1';
                        this.state.hardware_configs.digital_input[0].alias = '液位传感器';
                        this.state.hardware_configs.digital_input[0].type = 'DigitalInput002';
                        this.state.hardware_configs.digital_input[0].alarm = 1;
                        this.state.hardware_configs.digital_input[0].normal_upload_interval = 600;
                        this.state.hardware_configs.digital_input[0].alarm_upload_interval = 30;
                        this.state.hardware_configs.digital_input[1].enable = '1';
                        this.state.hardware_configs.digital_input[1].alias = '井盖传感器';
                        this.state.hardware_configs.digital_input[1].type = 'DigitalInput002';
                        this.state.hardware_configs.digital_input[1].alarm = 1;
                        this.state.hardware_configs.digital_input[1].normal_upload_interval = 600;
                        this.state.hardware_configs.digital_input[1].alarm_upload_interval = 30;
                        this.setState({
                          hardware_configs: this.state.hardware_configs,
                        });
                      } else if (e === '2') {
                        this.state.hardware_configs.device[0].enable = 0;
                        this.state.hardware_configs.flowmeter[0].enable = 1;
                        this.state.hardware_configs.flowmeter[0].alias = '流量计';
                        this.state.hardware_configs.flowmeter[0].device_number = '';
                        this.state.hardware_configs.flowmeter[0].valve_status = 0;
                        this.state.hardware_configs.flowmeter[0].upload_interval = 12;
                        this.setState({
                          hardware_configs: this.state.hardware_configs,
                        });
                      } else if (e === '3') {
                        this.state.hardware_configs.flowmeter[0].enable = 0;
                        this.state.hardware_configs.flowmeter[1].enable = 0;

                        this.state.hardware_configs.device[0].enable = 1;
                        this.state.hardware_configs.device[0].upload_interval = 60;
                        this.state.hardware_configs.modbus_03[0].type = 'CHEMITEC-50-SERIES';
                        this.state.hardware_configs.modbus_03[0].alias = '水质监测';
                        this.state.hardware_configs.modbus_03[0].upload_interval = 900;
                        this.state.hardware_configs.modbus_03[0].channel1_type = 4;
                        this.state.hardware_configs.modbus_03[0].channel2_type = 3;
                        this.state.hardware_configs.modbus_03[0].channel3_type = 2;
                        this.state.hardware_configs.modbus_03[0].channel4_type = 1;

                        this.setState({
                          hardware_configs: this.state.hardware_configs,
                        });
                      } else if (e === '4') {
                        this.state.hardware_configs.flowmeter[0].enable = 0;
                        this.state.hardware_configs.flowmeter[1].enable = 0;

                        this.state.hardware_configs.device[0].enable = 1;
                        this.state.hardware_configs.device[0].upload_interval = 60;
                        this.state.hardware_configs.modbus_03[0].type = 'Modbus010';
                        this.state.hardware_configs.modbus_03[0].alias = '进水流量计';
                        this.state.hardware_configs.modbus_03[0].upload_interval = 900;
                        this.state.hardware_configs.modbus_03[0].slave_address = 1;

                        this.state.hardware_configs.modbus_03[1].type = 'Modbus010';
                        this.state.hardware_configs.modbus_03[1].alias = '出水流量计';
                        this.state.hardware_configs.modbus_03[1].upload_interval = 900;
                        this.state.hardware_configs.modbus_03[1].slave_address = 2;

                        this.setState({
                          hardware_configs: this.state.hardware_configs,
                        });
                      }else if (e === '5') {
                        this.state.hardware_configs.flowmeter[0].enable = 0;
                        this.state.hardware_configs.flowmeter[1].enable = 0;

                        this.state.hardware_configs.device[0].enable = 1;
                        this.state.hardware_configs.device[0].upload_interval = 60;

                        this.state.hardware_configs.modbus_03[0].type = 'Modbus012';
                        this.state.hardware_configs.modbus_03[0].alias = 'DN800电磁流量计';
                        this.state.hardware_configs.modbus_03[0].upload_interval = 900;
                        this.state.hardware_configs.modbus_03[0].slave_address = 1;

                        this.setState({
                          hardware_configs: this.state.hardware_configs,
                        });
                      }else if (e === '6') {
                        this.state.hardware_configs.flowmeter[0].enable = 0;
                        this.state.hardware_configs.flowmeter[1].enable = 0;

                        this.state.hardware_configs.device[0].enable = 1;
                        this.state.hardware_configs.device[0].upload_interval = 60;

                        this.state.hardware_configs.modbus_03[0].type = 'Modbus011';
                        this.state.hardware_configs.modbus_03[0].alias = 'DN800电磁流量计';
                        this.state.hardware_configs.modbus_03[0].upload_interval = 900;
                        this.state.hardware_configs.modbus_03[0].slave_address = 1;

                        this.setState({
                          hardware_configs: this.state.hardware_configs,
                        });
                      }else if (e === '7') {
                        this.state.hardware_configs.flowmeter[0].enable = 0;
                        this.state.hardware_configs.flowmeter[1].enable = 0;

                        this.state.hardware_configs.device[0].enable = 1;
                        this.state.hardware_configs.device[0].upload_interval = 60;

                        this.state.hardware_configs.modbus_03[0].type = 'Modbus013';
                        this.state.hardware_configs.modbus_03[0].alias = 'DN400电磁流量计';
                        this.state.hardware_configs.modbus_03[0].upload_interval = 900;
                        this.state.hardware_configs.modbus_03[0].slave_address = 1;

                        this.setState({
                          hardware_configs: this.state.hardware_configs,
                        });
                      }
                    });
                  }}>
            <Option value={'0'}>未知</Option>
            <Option value={'1'}>双阀减压阀站点</Option>
            <Option value={'2'}>流量计站点</Option>
            <Option value={'3'}>水质监测站点</Option>
            <Option value={'4'}>电磁计量器站点</Option>
            <Option value={'5'}>DN800电磁流量计(SNLD-DN800)</Option>
            <Option value={'6'}>DN800电磁流量计(待定)</Option>
            <Option value={'7'}>LDE-DN400-400(珠华)</Option>

          </Select>
        </FormItem>


        {
          Boolean(Number(this.state.templateId)) &&
          <Fragment>
            <FormItem
              {...formItemLayoutWithLabel}
              label={(
                <span>
               站点图片
            </span>
              )}>

              <Zmage src={img} alt="" style={{ width: 300 }}/>
            </FormItem>
            {
              (Number(this.state.templateId) === 1 || Number(this.state.templateId) === 3 || Number(this.state.templateId) === 4
                || Number(this.state.templateId) === 5 || Number(this.state.templateId) === 6|| Number(this.state.templateId) === 7) &&
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               站点IMEI
            </span>
                )}
              >
                {getFieldDecorator('imei', {
                  initialValue: this.props.editRecord ? this.props.editRecord.imei : '',
                  rules: [{ required: true, message: '请输入IMEI' }],
                })(
                  <Input disabled={Boolean(this.props.editRecord)}/>,
                )}
              </FormItem>
            }
            {
              Number(this.state.templateId) === 1 &&
              <Form layout="inline" style={{ paddingBottom: '50px' }}>
                <div className={styles.box_item} style={{ paddingTop: '12px' }}>
                  <Tabs size='small' defaultActiveKey={'device'} style={{ background: '#fafafa' }}>
                    <TabPane tab={'设备信息'} key={'device'}>

                      <Form.Item
                        label="数据上传间隔(分钟)"
                      >
                        <InputNumber
                          value={this.state.hardware_configs.device && this.state.hardware_configs.device[0].upload_interval}
                          onChange={(e) => {
                            if (!this.state.hardware_configs.device) {
                              this.state.hardware_configs.device = [];
                            }
                            if (this.state.hardware_configs.device.length < 1) {
                              this.state.hardware_configs.device[0] = {};
                              this.state.hardware_configs.device[0].upload_interval = e;
                            } else {
                              this.state.hardware_configs.device.splice(0, 1, {
                                ...this.state.hardware_configs.device[0],
                                upload_interval: e,
                              });
                            }
                            this.changeConfig({ device: this.state.hardware_configs.device });
                          }}
                        />
                      </Form.Item>

                    </TabPane>
                  </Tabs>
                </div>
                <div className={styles.box_item}>
                  <Tabs size='small' defaultActiveKey={'传感器1'} style={{ background: '#fafafa' }}>
                    {
                      [{ name: '传感器1' }, { name: '传感器2' }, { name: '传感器3' }, { name: '传感器4' }].map((item, index) => {

                        if (!(this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && this.state.hardware_configs.sensor[index].type)) {
                          return false;
                        }
                        return <TabPane tab={item.name} key={item.name}>
                          {
                            this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && Boolean(this.state.hardware_configs.sensor[index].type) &&
                            [{ name: '别名', key: 'alias' }].map((item2, index2) => {
                              return <Fragment key={index2}>
                                <Form.Item
                                  label={item2.name}>

                                <span>
                                 {this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && this.state.hardware_configs.sensor[index][item2.key]}
                                </span>
                                </Form.Item>
                                <br/>
                              </Fragment>;

                            })
                          }


                          {this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && Boolean(this.state.hardware_configs.sensor[index].type) &&
                          [{ name: '上传间隔(秒)', key: 'normal_upload_interval' }, {
                            name: '波动值(Mpa)',
                            key: 'fluctuation_value',
                          }].map((item2, index2) => {
                            return (this.state.hardware_configs.sensor[index].alarm === 1 || item2.key.indexOf('cancel') === -1) &&
                              <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >
                                  <InputNumber
                                    value={this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && this.state.hardware_configs.sensor[index][item2.key]}
                                    onChange={(e) => {
                                      if (!this.state.hardware_configs.sensor) {
                                        this.state.hardware_configs.sensor = [];
                                      }
                                      if (this.state.hardware_configs.sensor.length < 4) {
                                        if (this.state.hardware_configs.sensor[index]) {
                                          this.state.hardware_configs.sensor[index][item2.key] = e;
                                        } else {
                                          this.state.hardware_configs.sensor[index] = {};
                                          this.state.hardware_configs.sensor[index][item2.key] = e;
                                        }
                                      } else {
                                        this.state.hardware_configs.sensor.splice(index, 1, {
                                          ...this.state.hardware_configs.sensor[index],
                                          [item2.key]: e,
                                        });
                                      }


                                      this.changeConfig({ sensor: this.state.hardware_configs.sensor });
                                    }}
                                  />
                                </Form.Item>

                                <br/>

                              </Fragment>;

                          })
                          }
                          {this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && Boolean(this.state.hardware_configs.sensor[index].type) &&
                          <Fragment><Form.Item
                            label="是否预警"
                          >
                            <Radio.Group
                              onChange={(e) => {
                                if (!this.state.hardware_configs.sensor) {
                                  this.state.hardware_configs.sensor = [];
                                }
                                if (this.state.hardware_configs.sensor.length < 4) {
                                  if (this.state.hardware_configs.sensor[index]) {
                                    this.state.hardware_configs.sensor[index].alarm = e.target.value;
                                  } else {
                                    this.state.hardware_configs.sensor[index] = {};
                                    this.state.hardware_configs.sensor[index].alarm = e.target.value;
                                  }
                                } else {
                                  this.state.hardware_configs.sensor.splice(index, 1, {
                                    ...this.state.hardware_configs.sensor[index],
                                    alarm: e.target.value,
                                  });
                                }
                                this.changeConfig({ sensor: this.state.hardware_configs.sensor });
                              }}
                              value={this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && this.state.hardware_configs.sensor[index].alarm}>
                              <Radio value={1}>报警</Radio>
                              <Radio value={0}>不报警</Radio>
                            </Radio.Group>
                          </Form.Item>
                            <br/>
                          </Fragment>
                          }

                          {this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && Boolean(this.state.hardware_configs.sensor[index].type) &&
                          [{ name: '过压值(Mpa)', key: 'over' }, {
                            name: '欠压值(Mpa)',
                            key: 'under',
                          }].map((item2, index2) => {
                            return (this.state.hardware_configs.sensor[index].alarm === 1) &&
                              <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >
                                  <InputNumber
                                    value={this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && this.state.hardware_configs.sensor[index][item2.key]}
                                    onChange={(e) => {
                                      if (!this.state.hardware_configs.sensor) {
                                        this.state.hardware_configs.sensor = [];
                                      }
                                      if (this.state.hardware_configs.sensor.length < 4) {
                                        if (this.state.hardware_configs.sensor[index]) {
                                          this.state.hardware_configs.sensor[index][item2.key] = e;
                                        } else {
                                          this.state.hardware_configs.sensor[index] = {};
                                          this.state.hardware_configs.sensor[index][item2.key] = e;
                                        }
                                      } else {
                                        this.state.hardware_configs.sensor.splice(index, 1, {
                                          ...this.state.hardware_configs.sensor[index],
                                          [item2.key]: e,
                                        });
                                      }


                                      this.changeConfig({ sensor: this.state.hardware_configs.sensor });
                                    }}
                                  />
                                </Form.Item>
                                {index2 === 2 && <br/>}
                              </Fragment>;

                          })
                          }
                          {this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && Boolean(this.state.hardware_configs.sensor[index].type) && Boolean(this.state.hardware_configs.sensor[index].alarm) &&
                          [{
                            name: '报警间隔(秒)',
                            key: 'alarm_upload_interval',
                          }].map((item2, index2) => {
                            return (this.state.hardware_configs.sensor[index].alarm === 1 || item2.key.indexOf('cancel') === -1) &&
                              <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >
                                  <InputNumber
                                    value={this.state.hardware_configs.sensor && this.state.hardware_configs.sensor[index] && this.state.hardware_configs.sensor[index][item2.key]}
                                    onChange={(e) => {
                                      if (!this.state.hardware_configs.sensor) {
                                        this.state.hardware_configs.sensor = [];
                                      }
                                      if (this.state.hardware_configs.sensor.length < 4) {
                                        if (this.state.hardware_configs.sensor[index]) {
                                          this.state.hardware_configs.sensor[index][item2.key] = e;
                                        } else {
                                          this.state.hardware_configs.sensor[index] = {};
                                          this.state.hardware_configs.sensor[index][item2.key] = e;
                                        }
                                      } else {
                                        this.state.hardware_configs.sensor.splice(index, 1, {
                                          ...this.state.hardware_configs.sensor[index],
                                          [item2.key]: e,
                                        });
                                      }


                                      this.changeConfig({ sensor: this.state.hardware_configs.sensor });
                                    }}
                                  />
                                </Form.Item>

                              </Fragment>;

                          })
                          }


                        </TabPane>;
                      })
                    }
                  </Tabs>
                </div>
                <div className={styles.box_item}>
                  <Tabs size='small' defaultActiveKey={'Modbus1'} style={{ background: '#fafafa' }}>
                    {
                      [{ name: 'Modbus1' }, { name: 'Modbus2' }].map((item, index) => {
                        if (!(this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index].type)) {
                          return false;
                        }
                        return <TabPane tab={item.name} key={item.name}>
                          <Fragment><Form.Item
                            label='设备类型'>

                      <span>
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type) &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type).name}
                        </span>
                          </Form.Item>
                          </Fragment>
                          <br/>
                          {
                            this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                            [{ name: '别名', key: 'alias' }].map((item2, index2) => {
                              return <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >

                            <span>
                              {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                            </span>
                                </Form.Item>

                                <br/>

                              </Fragment>;

                            })
                          }


                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                          this.state.hardware_configs.modbus_03[index].type === 'DOUBLE-VALVE-PLC' &&
                          <Fragment>
                            {
                              [{
                                name: '蝶阀1动作',
                                key: 'butterfly_valve1_status',
                              }, {
                                name: '蝶阀2动作',
                                key: 'butterfly_valve2_status',
                              }, {
                                name: '蝶阀3动作',
                                key: 'butterfly_valve3_status',
                              }, {
                                name: '蝶阀4动作',
                                key: 'butterfly_valve4_status',
                              }].map((item2, index2) => {
                                return <Form.Item

                                  key={index2}
                                  label={item2.name}
                                >
                                  <Select
                                    style={{ width: '80px' }}
                                    onChange={(e) => {
                                      if (!this.state.hardware_configs.modbus_03) {
                                        this.state.hardware_configs.modbus_03 = [];
                                      }
                                      if (this.state.hardware_configs.modbus_03.length < 4) {
                                        if (this.state.hardware_configs.modbus_03[index]) {
                                          this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                        } else {
                                          this.state.hardware_configs.modbus_03[index] = {};
                                          this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                        }
                                      } else {
                                        this.state.hardware_configs.modbus_03.splice(index, 1, {
                                          ...this.state.hardware_configs.modbus_03[index],
                                          [item2.key]: e,
                                        });
                                      }
                                      this.changeConfig({ modbus_03: this.state.hardware_configs.modbus_03 });
                                    }}

                                    value={this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                                  >
                                    {[{ key: 1, name: '开' }, { key: 2, name: '停' }, {
                                      key: 4,
                                      name: '关',
                                    }].map((item, key) => {
                                      return (
                                        <Option key={key}
                                                value={item.key}>{item.name}</Option>
                                      );
                                    })}
                                  </Select>
                                </Form.Item>;

                              })

                            }
                          </Fragment>
                          }

                        </TabPane>;
                      })
                    }
                  </Tabs>
                </div>
                <div className={styles.box_item}>
                  <Tabs size='small' defaultActiveKey={'数字输入1'} style={{ background: '#fafafa' }}>
                    {
                      [{ name: '数字输入1' }, { name: '数字输入2' }].map((item, index) => {
                        if (!(this.state.hardware_configs.digital_input && this.state.hardware_configs.digital_input[index] && this.state.hardware_configs.digital_input[index].enable)) {
                          return false;
                        }
                        return <TabPane tab={item.name} key={item.name}>
                          <Fragment>

                            {this.state.hardware_configs.digital_input && this.state.hardware_configs.digital_input[index] && Boolean(this.state.hardware_configs.digital_input[index].enable) &&
                            [{ name: '别名', key: 'alias' }].map((item2, index2) => {
                              return <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >

                              <span>
                                {this.state.hardware_configs.digital_input && this.state.hardware_configs.digital_input[index] && this.state.hardware_configs.digital_input[index][item2.key]}
                              </span>
                                </Form.Item>

                                <br/>

                              </Fragment>;

                            })}

                            {this.state.hardware_configs.digital_input && this.state.hardware_configs.digital_input[index] && Boolean(this.state.hardware_configs.digital_input[index].type) &&
                            [{ name: '正常状态数据上传间隔(秒)', key: 'normal_upload_interval' }].map((item2, index2) => {
                              return (this.state.hardware_configs.digital_input[index].alarm === 1 || item2.key.indexOf('cancel') === -1) &&
                                <Fragment key={index2}>
                                  <Form.Item

                                    label={item2.name}
                                  >
                                    <InputNumber
                                      value={this.state.hardware_configs.digital_input && this.state.hardware_configs.digital_input[index] && this.state.hardware_configs.digital_input[index][item2.key]}
                                      onChange={(e) => {
                                        if (!this.state.hardware_configs.digital_input) {
                                          this.state.hardware_configs.digital_input = [];
                                        }
                                        if (this.state.hardware_configs.digital_input.length < 2) {
                                          if (this.state.hardware_configs.digital_input[index]) {
                                            this.state.hardware_configs.digital_input[index][item2.key] = e;
                                          } else {
                                            this.state.hardware_configs.digital_input[index] = {};
                                            this.state.hardware_configs.digital_input[index][item2.key] = e;
                                          }
                                        } else {
                                          this.state.hardware_configs.digital_input.splice(index, 1, {
                                            ...this.state.hardware_configs.digital_input[index],
                                            [item2.key]: e,
                                          });
                                        }


                                        this.changeConfig({ digital_input: this.state.hardware_configs.digital_input });
                                      }}
                                    />
                                  </Form.Item>
                                  <br/>
                                </Fragment>;

                            })
                            }
                            {this.state.hardware_configs.digital_input && this.state.hardware_configs.digital_input[index] && Boolean(this.state.hardware_configs.digital_input[index].type) &&
                            <Fragment><Form.Item
                              label="是否预警"
                            >
                              <Radio.Group onChange={(e) => {
                                if (!this.state.hardware_configs.digital_input) {
                                  this.state.hardware_configs.digital_input = [];
                                }
                                if (this.state.hardware_configs.digital_input.length < 2) {
                                  if (this.state.hardware_configs.digital_input[index]) {
                                    this.state.hardware_configs.digital_input[index].alarm = e.target.value;
                                  } else {
                                    this.state.hardware_configs.digital_input[index] = {};
                                    this.state.hardware_configs.digital_input[index].alarm = e.target.value;
                                  }
                                } else {
                                  this.state.hardware_configs.digital_input.splice(index, 1, {
                                    ...this.state.hardware_configs.digital_input[index],
                                    alarm: e.target.value,
                                  });
                                }
                                this.changeConfig({ digital_input: this.state.hardware_configs.digital_input });
                              }}
                                           value={this.state.hardware_configs.digital_input && this.state.hardware_configs.digital_input[index] && this.state.hardware_configs.digital_input[index].alarm}>
                                <Radio value={1}>报警</Radio>
                                <Radio value={0}>不报警</Radio>
                              </Radio.Group>
                            </Form.Item>
                              <br/>
                            </Fragment>
                            }
                            {this.state.hardware_configs.digital_input && this.state.hardware_configs.digital_input[index] && Boolean(this.state.hardware_configs.digital_input[index].type) && Boolean(this.state.hardware_configs.digital_input[index].alarm) &&
                            [{
                              name: '报警状态数据上传间隔(秒)',
                              key: 'alarm_upload_interval',
                            }].map((item2, index2) => {
                              return (this.state.hardware_configs.digital_input[index].alarm === 1 || item2.key.indexOf('cancel') === -1) &&
                                <Fragment key={index2}>
                                  <Form.Item

                                    label={item2.name}
                                  >
                                    <InputNumber
                                      value={this.state.hardware_configs.digital_input && this.state.hardware_configs.digital_input[index] && this.state.hardware_configs.digital_input[index][item2.key]}
                                      onChange={(e) => {
                                        if (!this.state.hardware_configs.digital_input) {
                                          this.state.hardware_configs.digital_input = [];
                                        }
                                        if (this.state.hardware_configs.digital_input.length < 2) {
                                          if (this.state.hardware_configs.digital_input[index]) {
                                            this.state.hardware_configs.digital_input[index][item2.key] = e;
                                          } else {
                                            this.state.hardware_configs.digital_input[index] = {};
                                            this.state.hardware_configs.digital_input[index][item2.key] = e;
                                          }
                                        } else {
                                          this.state.hardware_configs.digital_input.splice(index, 1, {
                                            ...this.state.hardware_configs.digital_input[index],
                                            [item2.key]: e,
                                          });
                                        }


                                        this.changeConfig({ digital_input: this.state.hardware_configs.digital_input });
                                      }}
                                    />
                                  </Form.Item>

                                </Fragment>;

                            })
                            }


                          </Fragment>


                        </TabPane>;
                      })
                    }
                  </Tabs>
                </div>
                <div className={styles.box_item}>
                  <Tabs size='small' defaultActiveKey={'调节阀1-1'} style={{ background: '#fafafa' }}>
                    {
                      [{ name: '调节阀1' }, { name: '调节阀2' }].map((item, index) => {
                        if (!(this.state.hardware_configs.control_valve && this.state.hardware_configs.control_valve[index] && this.state.hardware_configs.control_valve[index].enable)) {
                          return false;
                        }
                        return <TabPane tab={item.name} key={item.name}>
                          <Fragment>

                            {this.state.hardware_configs.control_valve && this.state.hardware_configs.control_valve[index] && Boolean(this.state.hardware_configs.control_valve[index].enable) &&
                            [{ name: '别名', key: 'alias' }].map((item2, index2) => {
                              return <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >

                              <span>
                                {this.state.hardware_configs.control_valve && this.state.hardware_configs.control_valve[index] && this.state.hardware_configs.control_valve[index][item2.key]}
                              </span>
                                </Form.Item>

                                <br/>

                              </Fragment>;

                            })
                            }
                          </Fragment>

                          {this.state.hardware_configs.control_valve && this.state.hardware_configs.control_valve[index] && Boolean(this.state.hardware_configs.modbus_03[index].enable) &&
                          <Fragment><Form.Item
                            label="设备编号"
                          >

                            <Input
                              value={this.state.hardware_configs.control_valve && this.state.hardware_configs.control_valve[index] && this.state.hardware_configs.control_valve[index].device_number}
                              onChange={(e) => {
                                if (!this.state.hardware_configs.control_valve) {
                                  this.state.hardware_configs.control_valve = [];
                                }
                                if (this.state.hardware_configs.control_valve.length < 2) {
                                  if (this.state.hardware_configs.control_valve[index]) {
                                    this.state.hardware_configs.control_valve[index].device_number = e.target.value;
                                  } else {
                                    this.state.hardware_configs.control_valve[index] = {};
                                    this.state.hardware_configs.control_valve[index].device_number = e.target.value;
                                  }
                                } else {
                                  this.state.hardware_configs.control_valve.splice(index, 1, {
                                    ...this.state.hardware_configs.control_valve[index],
                                    device_number: e.target.value,
                                  });
                                }


                                this.changeConfig({ control_valve: this.state.hardware_configs.control_valve });
                              }}
                            />
                          </Form.Item></Fragment>
                          }

                        </TabPane>;
                      })
                    }
                  </Tabs>
                </div>


              </Form>
            }
            {
              Number(this.state.templateId) === 2 &&
              <Form layout="inline" style={{ paddingBottom: '50px' }}>
                <div className={styles.box_item}>
                  <Tabs size='small' defaultActiveKey={'流量计1'} style={{ background: '#fafafa' }}>
                    {
                      [{ name: '流量计' }].map((item, index) => {
                        if (!(this.state.hardware_configs.flowmeter && this.state.hardware_configs.flowmeter[index] && this.state.hardware_configs.flowmeter[index].enable)) {
                          console.log('false');
                          return false;
                        }
                        return <TabPane tab={item.name} key={item.name}>
                          <Fragment>

                            {this.state.hardware_configs.flowmeter && this.state.hardware_configs.flowmeter[index] && Boolean(this.state.hardware_configs.flowmeter[index].enable) &&
                            [{ name: '别名', key: 'alias' }].map((item2, index2) => {
                              return <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >

                              <span>
                                {this.state.hardware_configs.flowmeter && this.state.hardware_configs.flowmeter[index] && this.state.hardware_configs.flowmeter[index][item2.key]}
                              </span>
                                </Form.Item>

                                <br/>

                              </Fragment>;

                            })
                            }
                          </Fragment>

                          <Form.Item
                            label="设备编号"
                          >

                            <Input
                              value={this.state.hardware_configs.flowmeter && this.state.hardware_configs.flowmeter[index] && this.state.hardware_configs.flowmeter[index].device_number}
                              onChange={(e) => {
                                if (!this.state.hardware_configs.flowmeter) {
                                  this.state.hardware_configs.flowmeter = [];
                                }
                                if (this.state.hardware_configs.flowmeter.length < 2) {
                                  if (this.state.hardware_configs.flowmeter[index]) {
                                    this.state.hardware_configs.flowmeter[index].device_number = e.target.value;
                                  } else {
                                    this.state.hardware_configs.flowmeter[index] = {};
                                    this.state.hardware_configs.flowmeter[index].device_number = e.target.value;
                                  }
                                } else {
                                  this.state.hardware_configs.flowmeter.splice(index, 1, {
                                    ...this.state.hardware_configs.flowmeter[index],
                                    device_number: e.target.value,
                                  });
                                }


                                this.changeConfig({ flowmeter: this.state.hardware_configs.flowmeter });
                              }}
                            />
                          </Form.Item>
                          <br/>
                          {
                            [{
                              name: '阀门状态',
                              key: 'valve_status',
                            }].map((item2, index2) => {
                              return <Form.Item

                                key={index2}
                                label={item2.name}
                              >
                                <Select
                                  style={{ width: '80px' }}
                                  onChange={(e) => {
                                    if (!this.state.hardware_configs.flowmeter) {
                                      this.state.hardware_configs.flowmeter = [];
                                    }
                                    if (this.state.hardware_configs.flowmeter.length < 2) {
                                      if (this.state.hardware_configs.flowmeter[index]) {
                                        this.state.hardware_configs.flowmeter[index][item2.key] = e;
                                      } else {
                                        this.state.hardware_configs.flowmeter[index] = {};
                                        this.state.hardware_configs.flowmeter[index][item2.key] = e;
                                      }
                                    } else {
                                      this.state.hardware_configs.flowmeter.splice(index, 1, {
                                        ...this.state.hardware_configs.flowmeter[index],
                                        [item2.key]: e,
                                      });
                                    }
                                    this.changeConfig({ flowmeter: this.state.hardware_configs.flowmeter });
                                  }}

                                  value={this.state.hardware_configs.flowmeter && this.state.hardware_configs.flowmeter[index] && this.state.hardware_configs.flowmeter[index][item2.key]}
                                >
                                  {[{ key: 0, name: '关' }, { key: 1, name: '开' }].map((item, key) => {
                                    return (
                                      <Option key={key}
                                              value={item.key}>{item.name}</Option>
                                    );
                                  })}
                                </Select>
                              </Form.Item>;
                            })
                          }
                          {
                            [{
                              name: '数据上传间隔',
                              key: 'upload_interval',
                            }].map((item2, index2) => {
                              return <Form.Item

                                key={index2}
                                label={item2.name}
                              >
                                <Select
                                  style={{ width: '160px' }}
                                  onChange={(e) => {
                                    if (!this.state.hardware_configs.flowmeter) {
                                      this.state.hardware_configs.flowmeter = [];
                                    }
                                    if (this.state.hardware_configs.flowmeter.length < 2) {
                                      if (this.state.hardware_configs.flowmeter[index]) {
                                        this.state.hardware_configs.flowmeter[index][item2.key] = e;
                                      } else {
                                        this.state.hardware_configs.flowmeter[index] = {};
                                        this.state.hardware_configs.flowmeter[index][item2.key] = e;
                                      }
                                    } else {
                                      this.state.hardware_configs.flowmeter.splice(index, 1, {
                                        ...this.state.hardware_configs.flowmeter[index],
                                        [item2.key]: e,
                                      });
                                    }
                                    this.changeConfig({ flowmeter: this.state.hardware_configs.flowmeter });
                                  }}

                                  value={this.state.hardware_configs.flowmeter && this.state.hardware_configs.flowmeter[index] && this.state.hardware_configs.flowmeter[index][item2.key]}
                                >
                                  {[{ key: 1, name: '每天1次' }, { key: 2, name: '12小时1次' },
                                    { key: 3, name: '8小时1次' }, { key: 4, name: '6小时1次' },
                                    { key: 5, name: '4小时1次' }, { key: 6, name: '3小时1次' },
                                    { key: 7, name: '2小时1次' }, { key: 8, name: '1小时1次' },
                                    { key: 9, name: '30分钟1次' }, { key: 10, name: '15分钟1次' },
                                    { key: 11, name: '5分钟1次' }, { key: 12, name: '1分钟1次' }].map((item, key) => {
                                    return (
                                      <Option key={key}
                                              value={item.key}>{item.name}</Option>
                                    );
                                  })}
                                </Select>
                              </Form.Item>;
                            })
                          }
                        </TabPane>;
                      })
                    }
                  </Tabs>
                </div>


              </Form>
            }
            {
              Number(this.state.templateId) === 3 &&
              <Form layout="inline" style={{ paddingBottom: '50px' }}>
                <div className={styles.box_item} style={{ paddingTop: '12px' }}>
                  <Tabs size='small' defaultActiveKey={'device'} style={{ background: '#fafafa' }}>
                    <TabPane tab={'设备信息'} key={'device'}>

                      <Form.Item
                        label="数据上传间隔(分钟)"
                      >
                        <InputNumber
                          value={this.state.hardware_configs.device && this.state.hardware_configs.device[0].upload_interval}
                          onChange={(e) => {
                            if (!this.state.hardware_configs.device) {
                              this.state.hardware_configs.device = [];
                            }
                            if (this.state.hardware_configs.device.length < 1) {
                              this.state.hardware_configs.device[0] = {};
                              this.state.hardware_configs.device[0].upload_interval = e;
                            } else {
                              this.state.hardware_configs.device.splice(0, 1, {
                                ...this.state.hardware_configs.device[0],
                                upload_interval: e,
                              });
                            }
                            this.changeConfig({ device: this.state.hardware_configs.device });
                          }}
                        />
                      </Form.Item>

                    </TabPane>
                  </Tabs>
                </div>
                <div className={styles.box_item}>
                  <Tabs size='small' defaultActiveKey={'Modbus1'} style={{ background: '#fafafa' }}>
                    {
                      [{ name: 'Modbus1' }, { name: 'Modbus2' }].map((item, index) => {
                        if (!(this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index].type)) {
                          return false;
                        }
                        return <TabPane tab={item.name} key={item.name}>
                          <Fragment><Form.Item
                            label='设备类型'>

                      <span>
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            { key: 'CHEMITEC-50-SERIES', name: '水质检测' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type) &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            { key: 'CHEMITEC-50-SERIES', name: '水质检测' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type).name}
                        </span>
                          </Form.Item>
                          </Fragment>
                          <br/>
                          {/* {
                            this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                            [{ name: '别名', key: 'alias' }].map((item2, index2) => {
                              return <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >

                            <span>
                              {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                            </span>
                                </Form.Item>

                                <br/>

                              </Fragment>;

                            })
                          }*/}


                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                          this.state.hardware_configs.modbus_03[index].type === 'CHEMITEC-50-SERIES' &&
                          <Fragment>
                            {
                              [{
                                name: '通道1接入类型',
                                key: 'channel1_type',
                              }, {
                                name: '通道2接入类型',
                                key: 'channel2_type',
                              }, {
                                name: '通道3接入类型',
                                key: 'channel3_type',
                              }, {
                                name: '通道4接入类型',
                                key: 'channel4_type',
                              }].map((item2, index2) => {
                                return <Form.Item

                                  key={index2}
                                  label={item2.name}
                                >
                                  <Select
                                    style={{ width: '80px' }}
                                    onChange={(e) => {
                                      if (!this.state.hardware_configs.modbus_03) {
                                        this.state.hardware_configs.modbus_03 = [];
                                      }
                                      if (this.state.hardware_configs.modbus_03.length < 4) {
                                        if (this.state.hardware_configs.modbus_03[index]) {
                                          this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                        } else {
                                          this.state.hardware_configs.modbus_03[index] = {};
                                          this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                        }
                                      } else {
                                        this.state.hardware_configs.modbus_03.splice(index, 1, {
                                          ...this.state.hardware_configs.modbus_03[index],
                                          [item2.key]: e,
                                        });
                                      }
                                      this.changeConfig({ modbus_03: this.state.hardware_configs.modbus_03 });
                                    }}

                                    value={this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                                  >
                                    {[{ key: 1, name: 'PH值' }, { key: 2, name: '浊度' }, {
                                      key: 3,
                                      name: '溶氧',
                                    }, {
                                      key: 4,
                                      name: '电导率',
                                    }].map((item, key) => {
                                      return (
                                        <Option key={key}
                                                value={item.key}>{item.name}</Option>
                                      );
                                    })}
                                  </Select>
                                </Form.Item>;

                              })

                            }
                          </Fragment>
                          }
                          <br/>
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                          [{ name: '数据上传间隔(秒)', key: 'upload_interval' }].map((item2, index2) => {
                            return <Fragment key={index2}>
                              <Form.Item

                                label={item2.name}
                              >
                                <InputNumber
                                  value={this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                                  onChange={(e) => {
                                    if (!this.state.hardware_configs.modbus_03) {
                                      this.state.hardware_configs.modbus_03 = [];
                                    }
                                    if (this.state.hardware_configs.modbus_03.length < 2) {
                                      if (this.state.hardware_configs.modbus_03[index]) {
                                        this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                      } else {
                                        this.state.hardware_configs.modbus_03[index] = {};
                                        this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                      }
                                    } else {
                                      this.state.hardware_configs.modbus_03.splice(index, 1, {
                                        ...this.state.hardware_configs.modbus_03[index],
                                        [item2.key]: e,
                                      });
                                    }


                                    this.changeConfig({ modbus_03: this.state.hardware_configs.modbus_03 });
                                  }}
                                />
                              </Form.Item>
                              <br/>
                            </Fragment>;

                          })
                          }

                        </TabPane>;
                      })
                    }
                  </Tabs>
                </div>
              </Form>
            }
            {
              Number(this.state.templateId) === 4 &&
              <Form layout="inline" style={{ paddingBottom: '50px' }}>
                <div className={styles.box_item} style={{ paddingTop: '12px' }}>
                  <Tabs size='small' defaultActiveKey={'device'} style={{ background: '#fafafa' }}>
                    <TabPane tab={'设备信息'} key={'device'}>

                      <Form.Item
                        label="数据上传间隔(分钟)"
                      >
                        <InputNumber
                          value={this.state.hardware_configs.device && this.state.hardware_configs.device[0].upload_interval}
                          onChange={(e) => {
                            if (!this.state.hardware_configs.device) {
                              this.state.hardware_configs.device = [];
                            }
                            if (this.state.hardware_configs.device.length < 1) {
                              this.state.hardware_configs.device[0] = {};
                              this.state.hardware_configs.device[0].upload_interval = e;
                            } else {
                              this.state.hardware_configs.device.splice(0, 1, {
                                ...this.state.hardware_configs.device[0],
                                upload_interval: e,
                              });
                            }
                            this.changeConfig({ device: this.state.hardware_configs.device });
                          }}
                        />
                      </Form.Item>

                    </TabPane>
                  </Tabs>
                </div>
                <div className={styles.box_item}>
                  <Tabs size='small' defaultActiveKey={'Modbus1'} style={{ background: '#fafafa' }}>
                    {
                      [{ name: 'Modbus1' }, { name: 'Modbus2' }].map((item, index) => {
                        if (!(this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index].type)) {
                          return false;
                        }
                        return <TabPane tab={item.name} key={item.name}>
                          <Fragment><Form.Item
                            label='设备类型'>

                      <span>
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            { key: 'CHEMITEC-50-SERIES', name: '水质检测' },
                            { key: 'Modbus010', name: '电磁计量器' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type) &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            { key: 'CHEMITEC-50-SERIES', name: '水质检测' },
                            { key: 'Modbus010', name: '电磁计量器' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type).name}
                        </span>
                          </Form.Item>
                          </Fragment>
                          <br/>
                          {
                            this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                            [{ name: '别名', key: 'alias' }].map((item2, index2) => {
                              return <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >

                            <span>
                              {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                            </span>
                                </Form.Item>

                                <br/>

                              </Fragment>;

                            })
                          }
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                          [{ name: '数据上传间隔(秒)', key: 'upload_interval' }].map((item2, index2) => {
                            return <Fragment key={index2}>
                              <Form.Item

                                label={item2.name}
                              >
                                <InputNumber
                                  value={this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                                  onChange={(e) => {
                                    if (!this.state.hardware_configs.modbus_03) {
                                      this.state.hardware_configs.modbus_03 = [];
                                    }
                                    if (this.state.hardware_configs.modbus_03.length < 2) {
                                      if (this.state.hardware_configs.modbus_03[index]) {
                                        this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                      } else {
                                        this.state.hardware_configs.modbus_03[index] = {};
                                        this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                      }
                                    } else {
                                      this.state.hardware_configs.modbus_03.splice(index, 1, {
                                        ...this.state.hardware_configs.modbus_03[index],
                                        [item2.key]: e,
                                      });
                                    }


                                    this.changeConfig({ modbus_03: this.state.hardware_configs.modbus_03 });
                                  }}
                                />
                              </Form.Item>
                              <br/>
                            </Fragment>;

                          })
                          }

                        </TabPane>;
                      })
                    }
                  </Tabs>
                </div>
              </Form>
            }
            {
              Number(this.state.templateId) === 5 &&
              <Form layout="inline" style={{ paddingBottom: '50px' }}>
                <div className={styles.box_item} style={{ paddingTop: '12px' }}>
                  <Tabs size='small' defaultActiveKey={'device'} style={{ background: '#fafafa' }}>
                    <TabPane tab={'设备信息'} key={'device'}>

                      <Form.Item
                        label="数据上传间隔(分钟)"
                      >
                        <InputNumber
                          value={this.state.hardware_configs.device && this.state.hardware_configs.device[0].upload_interval}
                          onChange={(e) => {
                            if (!this.state.hardware_configs.device) {
                              this.state.hardware_configs.device = [];
                            }
                            if (this.state.hardware_configs.device.length < 1) {
                              this.state.hardware_configs.device[0] = {};
                              this.state.hardware_configs.device[0].upload_interval = e;
                            } else {
                              this.state.hardware_configs.device.splice(0, 1, {
                                ...this.state.hardware_configs.device[0],
                                upload_interval: e,
                              });
                            }
                            this.changeConfig({ device: this.state.hardware_configs.device });
                          }}
                        />
                      </Form.Item>

                    </TabPane>
                  </Tabs>
                </div>
                <div className={styles.box_item}>
                  <Tabs size='small' defaultActiveKey={'Modbus1'} style={{ background: '#fafafa' }}>
                    {
                      [{ name: 'Modbus1' }].map((item, index) => {
                        if (!(this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index].type)) {
                          return false;
                        }
                        return <TabPane tab={item.name} key={item.name}>
                          <Fragment><Form.Item
                            label='设备类型'>

                      <span>
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            { key: 'CHEMITEC-50-SERIES', name: '水质检测' },
                            { key: 'Modbus010', name: '电磁计量器' },
                            { key: 'Modbus011', name: 'Modbus011' },
                            { key: 'Modbus012', name: 'Modbus012' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type) &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            { key: 'CHEMITEC-50-SERIES', name: '水质检测' },
                            { key: 'Modbus010', name: '电磁计量器' },
                            { key: 'Modbus011', name: 'Modbus011' },
                            { key: 'Modbus012', name: 'Modbus012' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type).name}
                        </span>
                          </Form.Item>
                          </Fragment>
                          <br/>
                          {
                            this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                            [{ name: '别名', key: 'alias' }].map((item2, index2) => {
                              return <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >

                            <span>
                              {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                            </span>
                                </Form.Item>

                                <br/>

                              </Fragment>;

                            })
                          }
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                          [{ name: '数据上传间隔(秒)', key: 'upload_interval' }].map((item2, index2) => {
                            return <Fragment key={index2}>
                              <Form.Item

                                label={item2.name}
                              >
                                <InputNumber
                                  value={this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                                  onChange={(e) => {
                                    if (!this.state.hardware_configs.modbus_03) {
                                      this.state.hardware_configs.modbus_03 = [];
                                    }
                                    if (this.state.hardware_configs.modbus_03.length < 2) {
                                      if (this.state.hardware_configs.modbus_03[index]) {
                                        this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                      } else {
                                        this.state.hardware_configs.modbus_03[index] = {};
                                        this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                      }
                                    } else {
                                      this.state.hardware_configs.modbus_03.splice(index, 1, {
                                        ...this.state.hardware_configs.modbus_03[index],
                                        [item2.key]: e,
                                      });
                                    }


                                    this.changeConfig({ modbus_03: this.state.hardware_configs.modbus_03 });
                                  }}
                                />
                              </Form.Item>
                              <br/>
                            </Fragment>;

                          })
                          }

                        </TabPane>;
                      })
                    }
                  </Tabs>
                </div>
              </Form>
            }
            {
              Number(this.state.templateId) === 6 &&
              <Form layout="inline" style={{ paddingBottom: '50px' }}>
                <div className={styles.box_item} style={{ paddingTop: '12px' }}>
                  <Tabs size='small' defaultActiveKey={'device'} style={{ background: '#fafafa' }}>
                    <TabPane tab={'设备信息'} key={'device'}>

                      <Form.Item
                        label="数据上传间隔(分钟)"
                      >
                        <InputNumber
                          value={this.state.hardware_configs.device && this.state.hardware_configs.device[0].upload_interval}
                          onChange={(e) => {
                            if (!this.state.hardware_configs.device) {
                              this.state.hardware_configs.device = [];
                            }
                            if (this.state.hardware_configs.device.length < 1) {
                              this.state.hardware_configs.device[0] = {};
                              this.state.hardware_configs.device[0].upload_interval = e;
                            } else {
                              this.state.hardware_configs.device.splice(0, 1, {
                                ...this.state.hardware_configs.device[0],
                                upload_interval: e,
                              });
                            }
                            this.changeConfig({ device: this.state.hardware_configs.device });
                          }}
                        />
                      </Form.Item>

                    </TabPane>
                  </Tabs>
                </div>
                <div className={styles.box_item}>
                  <Tabs size='small' defaultActiveKey={'Modbus1'} style={{ background: '#fafafa' }}>
                    {
                      [{ name: 'Modbus1' }].map((item, index) => {
                        if (!(this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index].type)) {
                          return false;
                        }
                        return <TabPane tab={item.name} key={item.name}>
                          <Fragment><Form.Item
                            label='设备类型'>

                      <span>
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            { key: 'CHEMITEC-50-SERIES', name: '水质检测' },
                            { key: 'Modbus010', name: '电磁计量器' },
                            { key: 'Modbus011', name: 'Modbus011' },
                            { key: 'Modbus012', name: 'Modbus012' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type) &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            { key: 'CHEMITEC-50-SERIES', name: '水质检测' },
                            { key: 'Modbus010', name: '电磁计量器' },
                            { key: 'Modbus011', name: 'Modbus011' },
                            { key: 'Modbus012', name: 'Modbus012' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type).name}
                        </span>
                          </Form.Item>
                          </Fragment>
                          <br/>
                          {
                            this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                            [{ name: '别名', key: 'alias' }].map((item2, index2) => {
                              return <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >

                            <span>
                              {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                            </span>
                                </Form.Item>

                                <br/>

                              </Fragment>;

                            })
                          }
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                          [{ name: '数据上传间隔(秒)', key: 'upload_interval' }].map((item2, index2) => {
                            return <Fragment key={index2}>
                              <Form.Item

                                label={item2.name}
                              >
                                <InputNumber
                                  value={this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                                  onChange={(e) => {
                                    if (!this.state.hardware_configs.modbus_03) {
                                      this.state.hardware_configs.modbus_03 = [];
                                    }
                                    if (this.state.hardware_configs.modbus_03.length < 2) {
                                      if (this.state.hardware_configs.modbus_03[index]) {
                                        this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                      } else {
                                        this.state.hardware_configs.modbus_03[index] = {};
                                        this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                      }
                                    } else {
                                      this.state.hardware_configs.modbus_03.splice(index, 1, {
                                        ...this.state.hardware_configs.modbus_03[index],
                                        [item2.key]: e,
                                      });
                                    }


                                    this.changeConfig({ modbus_03: this.state.hardware_configs.modbus_03 });
                                  }}
                                />
                              </Form.Item>
                              <br/>
                            </Fragment>;

                          })
                          }

                        </TabPane>;
                      })
                    }
                  </Tabs>
                </div>
              </Form>
            }
            {
              Number(this.state.templateId) === 7 &&
              <Form layout="inline" style={{ paddingBottom: '50px' }}>
                <div className={styles.box_item} style={{ paddingTop: '12px' }}>
                  <Tabs size='small' defaultActiveKey={'device'} style={{ background: '#fafafa' }}>
                    <TabPane tab={'设备信息'} key={'device'}>

                      <Form.Item
                        label="数据上传间隔(分钟)"
                      >
                        <InputNumber
                          value={this.state.hardware_configs.device && this.state.hardware_configs.device[0].upload_interval}
                          onChange={(e) => {
                            if (!this.state.hardware_configs.device) {
                              this.state.hardware_configs.device = [];
                            }
                            if (this.state.hardware_configs.device.length < 1) {
                              this.state.hardware_configs.device[0] = {};
                              this.state.hardware_configs.device[0].upload_interval = e;
                            } else {
                              this.state.hardware_configs.device.splice(0, 1, {
                                ...this.state.hardware_configs.device[0],
                                upload_interval: e,
                              });
                            }
                            this.changeConfig({ device: this.state.hardware_configs.device });
                          }}
                        />
                      </Form.Item>

                    </TabPane>
                  </Tabs>
                </div>
                <div className={styles.box_item}>
                  <Tabs size='small' defaultActiveKey={'Modbus1'} style={{ background: '#fafafa' }}>
                    {
                      [{ name: 'Modbus1' }].map((item, index) => {
                        if (!(this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index].type)) {
                          return false;
                        }
                        return <TabPane tab={item.name} key={item.name}>
                          <Fragment><Form.Item
                            label='设备类型'>

                      <span>
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            { key: 'CHEMITEC-50-SERIES', name: '水质检测' },
                            { key: 'Modbus010', name: '电磁计量器' },
                            { key: 'Modbus011', name: 'Modbus011' },
                            { key: 'Modbus012', name: 'Modbus012' },
                            { key: 'Modbus013', name: 'Modbus013' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type) &&
                          find([{ key: 'SCL-61D-LT50', name: '汇中 SCL-61D(管径<50mm)' }, {
                            key: 'SCL-61D-GTE50',
                            name: '汇中 SCL-61D(管径≥50mm)',
                          }, { key: 'PCM380L', name: '压力传感器' }, { key: 'PLC', name: '电动球阀' },
                            { key: 'DOUBLE-VALVE-PLC', name: '双阀PLC' },
                            { key: 'CHEMITEC-50-SERIES', name: '水质检测' },
                            { key: 'Modbus010', name: '电磁计量器' },
                            { key: 'Modbus011', name: 'Modbus011' },
                            { key: 'Modbus012', name: 'Modbus012' },
                            { key: 'Modbus013', name: 'Modbus013' },
                            {
                              key: 0,
                              name: '无',
                            }], o => o.key === this.state.hardware_configs.modbus_03[index].type).name}
                        </span>
                          </Form.Item>
                          </Fragment>
                          <br/>
                          {
                            this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                            [{ name: '别名', key: 'alias' }].map((item2, index2) => {
                              return <Fragment key={index2}>
                                <Form.Item

                                  label={item2.name}
                                >

                            <span>
                              {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                            </span>
                                </Form.Item>

                                <br/>

                              </Fragment>;

                            })
                          }
                          {this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && Boolean(this.state.hardware_configs.modbus_03[index].type) &&
                          [{ name: '数据上传间隔(秒)', key: 'upload_interval' }].map((item2, index2) => {
                            return <Fragment key={index2}>
                              <Form.Item

                                label={item2.name}
                              >
                                <InputNumber
                                  value={this.state.hardware_configs.modbus_03 && this.state.hardware_configs.modbus_03[index] && this.state.hardware_configs.modbus_03[index][item2.key]}
                                  onChange={(e) => {
                                    if (!this.state.hardware_configs.modbus_03) {
                                      this.state.hardware_configs.modbus_03 = [];
                                    }
                                    if (this.state.hardware_configs.modbus_03.length < 2) {
                                      if (this.state.hardware_configs.modbus_03[index]) {
                                        this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                      } else {
                                        this.state.hardware_configs.modbus_03[index] = {};
                                        this.state.hardware_configs.modbus_03[index][item2.key] = e;
                                      }
                                    } else {
                                      this.state.hardware_configs.modbus_03.splice(index, 1, {
                                        ...this.state.hardware_configs.modbus_03[index],
                                        [item2.key]: e,
                                      });
                                    }


                                    this.changeConfig({ modbus_03: this.state.hardware_configs.modbus_03 });
                                  }}
                                />
                              </Form.Item>
                              <br/>
                            </Fragment>;

                          })
                          }

                        </TabPane>;
                      })
                    }
                  </Tabs>
                </div>
              </Form>
            }
          </Fragment>}

        <div
          style={{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }}
        >
          <Button onClick={this.props.onClose} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={() => {
            if (this.state.point.length === 0) {
              message.error('请在地图上选择一个点');
              return;
            }
            if (!Boolean(Number(this.state.templateId))) {
              message.error('请选择站点类型');
              return;
            }
            console.log(this.state.templateId);
            console.log('this.state', this.state.hardware_configs);
            this.props.onSave(this.state.templateId, this.state.hardware_configs);
          }} type="primary">
            确定
          </Button>
        </div>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
